const player = document.querySelector('.player')
const toggle = document.querySelector('.toggle')
const volume = document.querySelector('[name="volume"]')
const playbackRate = document.querySelector('[name="playbackRate"]')
const skipButton = document.querySelectorAll('[data-skip]')
const view = document.querySelector('.viewer')
const progressFilled = document.querySelector('.progress__filled')
const progress = document.querySelector('.progress')
let isClick = false
//视频播放开关
function viewSwitch(){
    view.paused ? view.play() : view.pause() 
}
//播放图片切换
function iconChange() {
    const icon = this.paused ? '►' : '❚ ❚';
    toggle.textContent = icon
}
//视频快进/快退
function skip() {
    console.log(view.currentTime)
    view.currentTime += ~~this.dataset.skip
}
//视频倍速
function videoRate(e){
    view.playbackRate = e.target.value
}
//添加声音
function videoVolume(e){
    view.volume = e.target.value
}
//进度条
function progressBar(){
    const nowLoding = view.currentTime / view.duration
    progressFilled.style.flexBasis = `${nowLoding * 100}%`
}
//控制进度条
function changeProgressBar(e){
    const nowWidth = e.offsetX / progress.offsetWidth
    // progressFilled.style.flexBasis = `${nowWidth * 100}%`
    view.currentTime = view.duration * nowWidth
}
//视频控制
view.addEventListener('click',viewSwitch)
view.addEventListener('play', iconChange)
view.addEventListener('pause',iconChange)
view.addEventListener('timeupdate',progressBar)
//播放按钮控制
toggle.addEventListener('click',viewSwitch)
//快进快退
skipButton.forEach(element => {
    element.addEventListener('click',skip)
});
//视频倍速
playbackRate.addEventListener('input',videoRate)
//视频音量
volume.addEventListener('input',videoVolume)
//拖动控制条
progress.addEventListener('click',changeProgressBar)
progress.addEventListener('mousedown', () => {
    isClick = true
})
progress.addEventListener('mousemove', (e) => {
    if(isClick){
        changeProgressBar(e)
    }
})
progress.addEventListener('mouseup', () => {
    isClick = false
})